<!--  -->
<template>

  <div>
    <!-- <el-scrollbar ref="scrollbar" class="scrollbar"> -->
    <el-carousel :interval="5000" height="540px">
      <el-carousel-item class="carousel" v-for="(item,index) in banner" :key="index">
        <el-image fit="cover" :src="item.img" @click="linkTo(item.href)" style="cursor: pointer;"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- 行业痛点 -->
    <section v-if="pain">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{pain.title}}</div>
          <div class="subTitle" v-if="pain.subTitle">{{pain.subTitle}}</div>
         </div>

          <el-container class="pain wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s">
            <el-aside width="230px">
              <ul class="aside">
                <li v-for="(item,index) in pain.list" :key="index" @click="handlePain(index)" :class="{active:activePain===index}">{{ item.name }}</li>
              </ul>
            </el-aside>
            <el-main class="pain-main">
              <div v-for="(item,index) in pain.list[activePain].texts" :key="index">
                <img class="img" src="@/assets/images/icon-pain.png" alt="">
                {{ item }}
              </div>
            </el-main>
          </el-container>
      </div>
    </section>
    <!-- 提升  -->
    <section v-if="improve">
         <div class="globalTitle">
          <div class="title">{{ improve.title }}</div>
          <div class="subTitle" v-if="improve.subTitle">{{ improve.subTitle }}</div>
         </div>
         <div class="improve wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s">
          <div class="fullW">
            <div class="tabs">
              <div class="tabs-cell" v-for="(item,index) in improve.list" :key="index"  @click="handleImprove(index)" :class="{active:activeImprove===index}">
                <span class="index" v-show="activeImprove!==index"><b>0{{ index+1 }}</b>/</span>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>

          <div class="improve-main">
            <div class="line">
                <div class="fullW title">
                  <span class="index"><b>0{{ activeImprove+1 }}</b>/</span>
                  <span>{{ improve.list[activeImprove].title }}</span>
                </div>
            </div>
            <div class="fullW">
              <div class="improve-main-texts">
                <div class="list">
                  <div v-for="(item,index) in improve.list[activeImprove].texts" v-html="item"></div>
                </div>
                <img :src="improve.list[activeImprove].img" alt="">
              </div>
            </div>
          </div>
         </div>

    </section>
    <!-- 抉择  -->
    <section v-if="choose" class="sectionBg">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{choose.title}}</div>
          <div class="subTitle" v-if="choose.subTitle">{{choose.subTitle}}</div>
         </div>
         <div class="choose">
            <div class="choose-cell wow fadeInUpBig" :data-wow-duration="0.3*index+'s'" data-wow-delay="0.5s" v-for="(item,index) in choose.list" :key="index">
              <img class="img" :src="item.img" alt="">
              <div class="title">{{ item.name }}</div>
              <div class="text">{{ item.text }}</div>
            </div>
         </div>
        </div>
    </section>
    <!-- 亮点 -->
    <section v-if="sparkle">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{sparkle.title}}</div>
          <div class="subTitle" v-if="sparkle.subTitle">{{sparkle.subTitle}}</div>
         </div>
         <div class="sparkle">
            <div class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s" v-for="(item,index) in sparkle.list" :key="index">
              <img :src="item.img" class="img">
              <span>{{ item.name }}</span>
            </div>
         </div>
        </div>
    </section>
    <!-- 优势 -->
    <section v-if="superiority" class="sectionBg">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{superiority.title}}</div>
          <div class="subTitle" v-if="superiority.subTitle">{{superiority.subTitle}}</div>
         </div>
         <div class="superiority">
          <el-row :gutter="85">
            <el-col class="cell" :span="index>2?12:8" v-for="(item,index) in superiority.list" :key="index">
              <div class="superiority-item wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s">
                <div class="title">{{ item.name }}</div>
                <div class="text">{{ item.text }}</div>
              </div>
            </el-col>
          </el-row>
         </div>
        </div>
    </section>
    <!-- 服务流程 -->
    <section v-if="serviceFlow">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{serviceFlow.title}}</div>
          <div class="subTitle" v-if="serviceFlow.subTitle">{{serviceFlow.subTitle}}</div>
         </div>
         <div class="serviceFlow wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s" >
            <img :src="serviceFlow.img" class="img" alt="">
            <el-button v-waves class="btn large" v-if="serviceFlow.button" @click="linkTo(serviceFlow.button.href)" type="primary">{{ serviceFlow.button.name }}</el-button>
         </div>
        </div>
    </section>
    <!-- 合作伙伴 -->
    <section v-if="partners" class="sectionBg">
      <div class="fullW">
         <div class="globalTitle">
          <div class="title">{{partners.title}}</div>
          <div class="subTitle" v-if="partners.subTitle">{{partners.subTitle}}</div>
         </div>
         <div class="partners">
          <el-row :gutter="28">
            <el-col :span="5" v-for="(item,index) in partners.list" :key="index">
              <div class="item wow fadeInUpBig" :data-wow-duration="0.3*index+'s'" data-wow-delay="0.5s" @click="linkTo(item.href)">
                <el-image class="img" :src="item.img" fit="cover"></el-image>
              </div>
            </el-col>
          </el-row>

         </div>
        </div>
    </section>

    <!-- 体验DEMO -->
    <experience/>
  <!-- </el-scrollbar> -->
  </div>

</template>

<script>
// import { banner,pain,improve,choose,sparkle,superiority,serviceFlow,partners } from '@/static/data/index.json'
import WOW from 'wowjs';
import {ALI_API} from '@/utils'
export default {
  async asyncData({ app, error, store }) {
    const response = await fetch(`${ALI_API}/kyb_office/index.json`)
    return await response.json()
  },
  data() {
    return {
      activePain:0,
      activeImprove:0,
      scrollTop:0
    }
  },
  mounted() {
    // this.handleScroll()
    let wow = new WOW.WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
    console.log(this.isMobile())
  },
  methods: {
    handleScroll() {
     const wowNodes = document.getElementsByClassName('wow')
      const Nodes = Array.from(wowNodes)
     console.log(wowNodes)
     Nodes.forEach(item=>{
      // console.log(item.offsetTop)
      console.log(item.classLis)
     })
      let scrollbarEl = this.$refs.scrollbar.wrap
      scrollbarEl.onscroll = () => {
        this.scrollTop = scrollbarEl.scrollTop
        console.log(this.scrollTop)
      }
    },
    isMobile () {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    linkTo(href){
      if(href){
        if(href.startsWith('http')){
          window.open(href)
        }else{
          this.$router.push(href);
        }
      }
    },
    handlePain(index){
      this.activePain = index
    },
    handleImprove(index){
      this.activeImprove = index
    }
  },
}



</script>
<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.carousel {
  background-color: #fff;
  display: flex;
  justify-content: center;
  min-width: $use-fullW;
}
::v-deep(.el-carousel) {
  .el-carousel__arrow--left {
    left: calc(50% - 600px) !important;
  }

  .el-carousel__arrow--right {
    right: calc(50% - 600px) !important;
  }
}

.pain{
  width: 100%;
  border: 1px solid $use-color-line;
  border-radius:4px;
  overflow: hidden;
  background-color: #FFFAF6;
  margin-bottom: 100px;
  .aside{
    li{
      height: 90px;
      background: url('@/assets/images/pain.png');
      line-height: 90px;
      color: $use-color-info;
      padding-left: 32px;
      font-size: 22px;
      cursor: pointer;

      &.active{
        background:#F67C36;
        color: #fff;
        border: none;
      }
    }
  }
  .pain-main{
    padding: 0 64px;
    display:flex;
    flex-wrap: wrap;

    >div{
      width: 50%;
      padding: 32px 0;
      color: $use-color-info-light-2;
      font-size: 18px;
      .img{margin-right: 10px;}
    }
  }
}

.improve{
  .tabs{
    display: flex;
    justify-content: space-between;
    &-cell{
      width: 384px;
      height: 104px;
      border: 2px solid #FFD0B6;
      background-color: #FFFAF6;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: $use-color-info;
      cursor: pointer;
      .index{
        b{
          color: $use-color-primary;
          font-weight: 900;
        }
      }

      &.active{
        justify-content: flex-start;
        padding-left:32px;
        background: url('@/assets/images/improve.png');
        border: none;
      }
    }
  }

  &-main{
    .line{
      border-bottom: 1px solid $use-color-line;
    }

    .title{
      font-size: 22px;
      margin-top: 40px;
      padding-bottom: 24px;
      position: relative;

      &::before{
        content: '';
        height: 2px;
        width: 30px;
        background-color: $use-color-primary;
        position: absolute;
        bottom: 0;
      }
      .index{
        b{
          color: $use-color-primary;
          font-weight: 900;
          font-size: 20px;
        }
      }
    }

    &-texts{
      display: flex;
      justify-content: space-between;

      .list{
        width: 510px;
        >div{
          margin-top: 34px;
          margin-bottom: 22px;
          line-height: 30px;
          font-size: 16px;
          color: $use-color-info-light-3;
          b{
            color: $use-color-info-light-2;
          }
        }
      }
    }
  }
}

.choose{
  display: inline-flex;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 100px;
  width: 100%;
  &-cell{
    width: 288px;
    height: 290px;
    padding: 20px 24px 0;
    text-align: center;
    position: relative;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: background-color .5s;
    .img{
      width: 112px;
      height: 112px;
    }
    .title{
      line-height: 30px;
      margin: 10px 0;
      font-size: 22px;
    }
    .text{
      font-size: 14px;
      line-height: 22px;
      color: $use-color-info-light-3;
    }

    &:hover{
      background: linear-gradient(180deg, #FFFAF6 4%, #FFFFFF 100%);
      border-color: #fff;
      transition: background-color .5s;
      border-bottom:8px solid $use-color-primary ;
    }
  }
}

.sparkle{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid $use-color-line;
  border-top: 1px solid $use-color-line;
  margin-bottom: 100px;
  overflow: hidden;
  >div{
    border-bottom: 1px solid $use-color-line;
    border-right: 1px solid $use-color-line;
    padding:42px 48px;
    display: flex;
    align-items: center;
    width: 50%;
    .img{
      width: 72px;
      height: 72px;
      margin-right: 24px;
    }
    span{
      line-height: 30px;
      font-size: 22px;
    }
  }
}

.superiority{
  margin-bottom: 100px;
  padding: 55px 40px 0;
  background-color: #fff;
  display: inline-block;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  .cell{
    margin-bottom:55px;
  }
  &-item{
    .title{
      line-height: 30px;
      padding-bottom: 12px;
      border-bottom: 2px solid $use-color-primary;
      font-size: 22px;
      font-weight: 600;
    }
    .text{
      margin-top: 10px;
      color: $use-color-info-light-3;
      line-height: 30px;
      font-size: 14px;
    }
  }
}

.serviceFlow{
  text-align: center;
  padding-bottom: 100px;
  .img{
    max-width: $use-fullW;

  }
  .btn{
    margin-top: 72px;
  }
}

.partners{
  display: inline-flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  margin-bottom: 72px;

  .el-col{
    margin-bottom: 28px;
  }

  .item{
    border-radius:8px;
    background: #FFFFFF;
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .img{
      width: 138px;
      height: 46px;
    }
  }
}
.scrollbar{
  height: 100vh;
}
</style>
